<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<my-component1 :message="message"></my-component1>
			<!-- 	<my-component2>
			</my-component2> -->
			<my-component3>
			</my-component3>
		</div>
		<script>
			// 注册全局组件
			Vue.component('my-component1', {
				props: ['message'],
				template: '<p>{{message}}</p>'
			})

			// 注册全局组件
			Vue.component('my-component2', myComponent2)
			var myComponent2 = Vue.extend({
				template: '<p>注册全局组件2</p>'
			})

			// 注册局部组件
			var myComponent3 = {
				template: '<p>注册局部组件</p>'
			}
			new Vue({
				el: '#box',
				data: {
					message: '呵呵哈哈哈或或好fffffffffffffffffff或或或'
				},
				components: {
					'my-component3': myComponent3
				}
			})
		</script>
	</body>
</html>
